import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaErrorPage, WeaTop, WeaTab, WeaRightMenu, WeaNewScroll,WeaDialog,WeaDialogFooter,WeaLeftRightLayout } from 'ecCom';
import { Row, Button, Spin, Modal } from 'antd';
import LeftContainer from './myWorkPlan/leftContainer/index';
import RightContainer from './myWorkPlan/rightContainer/index';
const ButtonGroup = Button.Group;
import WorkPlanCreate from '../public/workPlanCreate/index';
import WorkPlanImport from '../public/workPlanImport/index';
import { observable, action, toJS } from 'mobx';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const confirm = Modal.confirm;
@inject('myWorkPlanStore')
@observer
class MyWorkPlan extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
		}
	}
	componentDidMount() {
		const { doInit } = this.props.myWorkPlanStore;
		doInit('', 'isInit');
		/** 
		 *  hideheader=true 时隐藏top
		 *  hidesidebar=true 时隐藏左侧边栏
		 * 	workType=1,2,13 有workType时不显示日程类型. -1 为全部类型;  1,13为显示类型值为1，13的日程
		 *  cancreate=true  是否允许在页面新建
		*/
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			const { doInit,setTime4RightCon } = this.props.myWorkPlanStore;
			doInit('', 'isInit');
			setTime4RightCon()
		}
	}

	componentWillUnmount() {
		//组件卸载时一般清理一些状态
	}

	setLeftRightLayout = (left, right) => {
		let fields = [];
		if(left) {
			let workplan_left_tree_visible = `workplan_left_tree_visible_${JSON.parse(localStorage.getItem('theme-account')) ? JSON.parse(localStorage.getItem('theme-account')).userid : ''}`;
			fields.push(
				<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@cjmcfj@leftRight`}
					className="myworkplan-calendar-left-right-layout"
					leftWidth={221}
					leftCom={left}
					showLeft={localStorage.getItem(workplan_left_tree_visible) !== 'true'}
					onCollapse={(bool) => { localStorage.setItem(workplan_left_tree_visible, !bool); }}
				>
					{right}
				</WeaLeftRightLayout>
			);

		} else {
			fields.push(right);
		}

		return fields;
	}

	getselectedUser = () => {
		return this.props.myWorkPlanStore.status&&this.props.myWorkPlanStore.status.selectedUser || this.props.location.query && this.props.location.query.selectedUser || '';
	}

	
	getcreateConditionParams = () => {
		return this.props.myWorkPlanStore && this.props.myWorkPlanStore.status && this.props.myWorkPlanStore.status.createConditionParams;
	}

	workPlanCreateClose = () => {
		let { close } = this.props.myWorkPlanStore;
		close(); 
	}

	workPlanCreateOnlyClose = () => {
		let { onlyClose, } = this.props.myWorkPlanStore;
		onlyClose(); 
	}
	
	workPlanCreateOnlyCloseImport = () => {
		let { closeImport, } = this.props.myWorkPlanStore;
		closeImport(); 
	}

	render() {
 
		let { status, getRightMenu, onRightMenuClick, close, onlyClose, importVisible, closeImport,setDialogHeight ,time4RightCon} = this.props.myWorkPlanStore;
		const { activeKey, selectedUser, createVisible, createType, workPlanId, createConditionParams, spinning, canEWSToOa, syncDay } = toJS(status);
		let breadcrumb = this.getBreadcrumb()
		let { query = false } = this.props.location;
		let btns = [];
		canEWSToOa&&btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@itym8g@doEwsToOa`} type="primary" className="doEwsToOa" disabled={false} onClick={()=> this.doEwsToOa()}>{getLabel(518144,"同步Exchange数据")}</Button>);
		query&&query.cancreate==='false' ? [] : btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5z572p@doCreate`} type="primary" className="doCreate" disabled={false} onClick={ this.doCreate}>{getLabel(18481,'新建日程')}</Button>);
		let {isDialog} = this.props;
		let dialogVisible=false;
		let minwidth=100;
		let contentHeight = query.hideheader !== 'true' ? 'calc(100% - 53px)' : '100%';
		btns.push(
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@spiu7h@doImport`} type="primary" className="doImport" disabled={false} onClick={this.doImport}>{getLabel(384890,'导入日程')}</Button>
		);
		if(isDialog){
			let _MH = document.documentElement.clientHeight;//浏览器高度
			let maxHeight=_MH-150;
			let dialogHeight=this.props.height||720;
			if(dialogHeight>maxHeight){
				dialogHeight=maxHeight;
			}
			setDialogHeight(dialogHeight);
			dialogVisible=this.props.visible;
			if(dialogVisible){
				minwidth=1066
			}
		}else{
			setDialogHeight(0);
		} 
		let collectParams={
			favname: getLabel(18480,'我的日程'),
			favouritetype: 5,
			objid: 0,
			importantlevel: 1,
		};
		return (
			<div>
			<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@8n7828`} className="myworkplan-rightMenu" datas={this.getRightMenu()} onClick={(key) =>{this.onRightMenuClick(key);} }  collectParams={collectParams}>
				{
					isDialog?
					(<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@kfr2y0`}
						visible={this.props.visible}
						style={{width: this.props.width|| 1200, height: this.props.height||720}}
						maskClosable={true}
						buttons={btns}  moreBtn={{datas:getRightMenu()}}
						onCancel={()=>{this.props.callback&&this.props.callback()}}
					>
						<div className="workPlan-myWorkPlan workPlan-myWorkPlan-dialog " id="workPlan-myWorkPlan-id"  >
							<div style={{width:'100%'}}>
								<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@yiceu9`}
									loading={spinning}
									icon={<i className='icon-coms-schedule' />}
									iconBgcolor='#7734FF'
									title={getLabel(18480,'我的日程')}
									showDropIcon={false}
									dropMenuDatas={getRightMenu()}
									onDropMenuClick={onRightMenuClick()}
									breadcrumb={breadcrumb}
									inDialog={true}
									className="myworkplan"
								>
									<div style={{ overflow: 'hidden',  height: '100%' }}>
										<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@pg3xnz`} className="workPlan-myWorkPlan-left-right" style={{ minWidth: minwidth+'px', height: '100%' }}>
											{
												this.setLeftRightLayout(
													query.hidesidebar !== 'true' && <LeftContainer ecId={`${this && this.props && this.props.ecId || ''}_LeftContainer@tgmto6`} className='leftsider'/>
													,
													<RightContainer ecId={`${this && this.props && this.props.ecId || ''}_RightContainer@mpqngu`} className='rightcontainer' hidesidebar={query.hidesidebar} workType={query.workType} cancreate={query.cancreate}>
													</RightContainer>
												)
											}
											
										</Row>
									</div>

									<WorkPlanCreate ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanCreate@dmh6ra`}
										type={createType}//新建为'create',查看为'preview',编辑edit,共享share
										visible={createVisible}//显隐受控
										doClose={this.workPlanCreateClose}//关闭回调, 保存等按钮会自动调用该回调，可以在这里写一些页面的刷新操作
										onlyClose={this.workPlanCreateOnlyClose}//关闭回调,关闭/取消等按钮会自动调用该回调，只做关闭操作
										workPlanId={workPlanId} //日程id，查看日程时用到
										createConditionParams={this.getcreateConditionParams()}//创建的默认值日期和时间,没有传[]
										activeKey={activeKey} //查看页面显示的面板1是基本信息，7是相关交流
										changeTab={this.changeTab}//查看页面切换面板的回调
										selectUser={this.getselectedUser()}//新建日程的接收人id
										workPlanTypeOptions=''//客户模块的新建日程，普通新建传'',客户新建传3
										crmIDs={''}//通过客户模块新建日程，并自动带出相关客户,[{'id':'','name':''}]
										crmid={''}
										docid={''}
										projectid={''}
										taskid={''}
										requestid={''}
										resourceid={''}
										description=''//客户模块需求，支持新建时传入的'基本信息-内容'
									/>
									<WorkPlanImport ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanImport@54bq7o`}
										visible={this.props.myWorkPlanStore.importVisible}
										doClose={this.workPlanCreateOnlyCloseImport}//关闭回调
									/>
								</WeaTop>
							</div>
						</div>
					</WeaDialog>)
					:
					(<div className="workPlan-myWorkPlan" id="workPlan-myWorkPlan-id" style={{height: '100%'}}>
						<div style={{ width: '100%', height: '100%' }}>
							{	
								!query ?
									<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@6aqkwt`}
										loading={spinning}
										icon={<i className='icon-coms-schedule' />}
										iconBgcolor='#7734FF'
										title={getLabel(18480,'我的日程')}
										buttons={btns}
										showDropIcon={false}
										dropMenuDatas={getRightMenu()}
										onDropMenuClick={onRightMenuClick()}
										breadcrumb={breadcrumb}
										className="myworkplan"
									>
										<div style={{ overflow: 'hidden', height: contentHeight  }}>
											<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@q9idth`} className="workPlan-myWorkPlan-left-right" style={{ minWidth: '1066px', height: '100%' }}>
												{
													this.setLeftRightLayout(
														<LeftContainer ecId={`${this && this.props && this.props.ecId || ''}_LeftContainer@4nej8p`}  className='leftsider'/> 
														,
														<RightContainer ecId={`${this && this.props && this.props.ecId || ''}_RightContainer@kpc434`} className='rightcontainer'>
														</RightContainer>
													)
												}
											</Row>
										</div>
									</WeaTop>
									:
									query.fromcard ?
										<div style={{ overflow: 'hidden', height: contentHeight  }}>
											<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@w588f6`} className="workPlan-myWorkPlan-left-right" style={{ minWidth: '1066px', height: '100%' }}>
												<RightContainer ecId={`${this && this.props && this.props.ecId || ''}_RightContainer@4pr3ed`} className='rightcontainer' style={{ paddingLeft: '' }} query={query}>{/*给人力加的*/}
												</RightContainer>
											</Row>
										</div>
										:
										<div style={{height: '100%'}}>
											{query.hideheader !== 'true' && <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@9lt8s9`}
												loading={spinning}
												icon={<i className='icon-coms-schedule' />}
												iconBgcolor='#7734FF'
												title={getLabel(18480,'我的日程')}
												buttons={btns}
												showDropIcon={false}
												dropMenuDatas={getRightMenu()}
												onDropMenuClick={onRightMenuClick()}
												breadcrumb={breadcrumb}
												className="myworkplan"
											/>}
											<div style={{ overflow: 'hidden', height: contentHeight  }}>
												<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@f0ou5j`} className="workPlan-myWorkPlan-left-right" style={{ minWidth: '1066px', height: '100%',  }}>
													{
														this.setLeftRightLayout(
															query.hidesidebar !== 'true' && <LeftContainer ecId={`${this && this.props && this.props.ecId || ''}_LeftContainer@eeys1k`} className='leftsider'/>
															,
															<RightContainer ecId={`${this && this.props && this.props.ecId || ''}_RightContainer@wugb05`} className='rightcontainer' hidesidebar={query.hidesidebar} workType={query.workType} cancreate={query.cancreate}>
															</RightContainer>
														)
													}
												</Row>
											</div>
											{/* </WeaTop> */}
										</div>
								
							}

							<WorkPlanCreate ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanCreate@lzbdax`}
								type={createType}//新建为'create',查看为'preview',编辑edit,共享share
								visible={createVisible}//显隐受控
								doClose={this.workPlanCreateClose}//关闭回调, 保存等按钮会自动调用该回调，可以在这里写一些页面的刷新操作
								onlyClose={this.workPlanCreateOnlyClose}//关闭回调,关闭/取消等按钮会自动调用该回调，只做关闭操作
								workPlanId={workPlanId} //日程id，查看日程时用到
								createConditionParams={this.getcreateConditionParams()}//创建的默认值日期和时间,没有传[]
								activeKey={activeKey} //查看页面显示的面板1是基本信息，7是相关交流
								changeTab={this.changeTab}//查看页面切换面板的回调
								selectUser={this.getselectedUser()}//新建日程的接收人id
								workPlanTypeOptions=''//客户模块的新建日程，普通新建传'',客户新建传3
								crmIDs={''}//通过客户模块新建日程，并自动带出相关客户,[{'id':'','name':''}]
								crmid={''}
								docid={''}
								projectid={''}
								taskid={''}
								requestid={''}
								resourceid={''}
								description=''//客户模块需求，支持新建时传入的'基本信息-内容'
							/>
							<WorkPlanImport ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanImport@b2bv3g`}
								visible={this.props.myWorkPlanStore.importVisible}
								doClose={this.workPlanCreateOnlyCloseImport}//关闭回调
							/>
						</div>
					</div>)
				}
			</WeaRightMenu>
		</div>
		)
	}


 


	getBreadcrumb = () => {
		let { status, changeSelectedUser, doUpdateCalender } = this.props.myWorkPlanStore
		let { selectedUser, selectedUserName } = toJS(status)
		let breadcrumb = [
			{
				name: getLabel(18480,'我的日程'),
				onClick: () => { changeSelectedUser('', ''); selectedUser == '' && doUpdateCalender(true) },
			},
		];
		if (selectedUserName) {
			breadcrumb.push({
				name: `${selectedUserName}${getLabel(384891,'的日程')}`,
				onClick: () => doUpdateCalender(true),
			})
		}
		return breadcrumb
	}
	changeTab = (e) => {
		this.props.myWorkPlanStore.changeTab(e)
	}

	doEwsToOa = () =>{
		let { doEwsToOa } = this.props.myWorkPlanStore;
		const confirmDiv = (<div>
			{getLabel(519439,'确定将Exchange日程数据同步到OA吗？')}<p/>
			{getLabel(519438,'（同步时间为当前日期所在月及下月第一周）')}
		</div>)
		confirm({
		  content: confirmDiv,
		  onOk: () => {
			doEwsToOa();
		  }
		})
	  }

	doCreate = () => {
		const { open } = this.props.myWorkPlanStore;
		let e = [];
		let date = new Date();
		let dateString = this.changeDateFormat(date);
		let timeString = date.toString().split(' ')[4].split(':', 2).join(':')
		e[2] = dateString;
		e[3] = timeString;
		e[4] = dateString;
		open('create', '', e);
	}
	doPreview = () => {
		const { open } = this.props.myWorkPlanStore
		open('preview');

	}
	doImport = () => {
		const { openImport } = this.props.myWorkPlanStore
		openImport();
	}
	changeDateFormat = data => {
		if (typeof (data) === 'string' && data != '') {
			return data
		}
		//日期格式转为yyyy-MM-dd
		let now = data || new Date();
		let year = now.getFullYear();
		let month = (now.getMonth() + 1).toString();
		let day = (now.getDate()).toString();
		if (month.length == 1) {
			month = "0" + month;
		}
		if (day.length == 1) {
			day = "0" + day;
		}
		let dateString = year + "-" + month + "-" + day;
		return dateString;
	}

	getRightMenu() {
		let rightBtns = [];
		let { query = false } = this.props.location;
		let { status } = this.props.myWorkPlanStore;
		const { canEWSToOa } = toJS(status);
		canEWSToOa&&rightBtns.push({ key: "doEwsToOa", content: getLabel(518144,'同步Exchange数据'), icon: <span className='icon-coms-Synchro' /> });
		query&&query.cancreate==='false' ? null : rightBtns.push({ key: "doCreate", content: getLabel(18481,'新建日程'), icon: <span className='icon-coms-New-Flow' /> })
		rightBtns.push({ key: "doImport", content: getLabel(384890,'导入日程'), icon: <span className='icon-coms-export' /> })
		return rightBtns;
	}

	onRightMenuClick(key) {
		if(key == 'doCreate'){
			this.doCreate();
		}else if(key == 'doImport'){
			this.doImport();
		}else if(key == 'doEwsToOa'){
			this.doEwsToOa();
		}
	}

}

export default MyWorkPlan
